import { Component } from "react";

function query(str: string) {
  // 0. 判断 str 是否存在
  if (!str) {
    return {};
  }
  // 1. 取出 str 中的 ? 号
  if (str.indexOf("?") === 0) {
    str = str.slice(1);
  }
  // 2. 按照 & 分割
  const arr = str.split("&"); // ['id=1', 'name=zs']
  // 3. 定义一个最终结果集合
  const result = {};
  // 4. 遍历 arr
  arr.forEach((item) => {
    // 4.1 将 item 使用 = 来分割
    const tmp = item.split("=");
    // 4.2 写入到 result 中
    result[tmp[0]] = tmp[1];
  });
  // 5. 返回 result
  return result;
}

export default class DetailOne extends Component {
  render() {
    // 从 this.props 获取到 location
    const { location } = this.props;

    // 从 location 中 获取到 search
    const { search } = location;

    // 对 search 查询字符串做分割，分割成一个对象的形式
    // ?id=1&name=zs  => { id: '1', name: 'zs' }
    const obj = query(search);
    console.log("obj", obj);

    // 使用 new URLSearchParmas 来构造出 searchParams 对象
    const searchParams = new URLSearchParams(search);
    console.log("id", searchParams.get("id"));
    console.log("name", searchParams.get("name"));

    return <div>DetailOne</div>;
  }
}
